<template>
  <transition name="el-fade-in">
    <div
      v-if="props.show"
      v-dragMove="{
        DragButton: '.config-header',
        DragWindow: '.config-window',
      }"
    >
      <div
        v-loading="props.isLoading"
        :class="[
          'config-window',
          commonStore.darkMode ? 'config-window-dark' : 'config-window-light',
        ]"
        :style="{
          width: props.width + 'px',
          top: props.top + 'px',
          right: props.right + 'px',
        }"
      >
        <div class="config-header">
          <slot
            v-if="props.title == '' && !props.showClose"
            name="title"
          ></slot>
          <span
            v-if="props.title != '' || props.showClose"
            class="config-header-title"
          >
            <span v-if="props.title != ''">{{ props.title }}</span>
            <slot v-else name="title"></slot>
          </span>
          <span
            v-if="props.title != '' || props.showClose"
            class="config-header-buttons"
          >
            <el-button
              v-if="props.showMore"
              link
              size="large"
              icon="more"
              @click="handleMore"
            ></el-button>
            <el-button
              v-if="props.showClose"
              link
              size="large"
              icon="close"
              @click="handleClose"
            ></el-button>
          </span>
        </div>
        <el-scrollbar :maxHeight="contentHeight">
          <div class="config-body">
            <slot></slot>
          </div>
        </el-scrollbar>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { computed } from "vue";
import useCommonStore from "@/store/common.js";
const commonStore = useCommonStore();
const props = defineProps({
  title: { type: String, default: "", required: false },
  show: { type: Boolean, default: false, required: false },
  showClose: { type: Boolean, default: true, required: false },
  width: { type: Number, default: 300, required: false },
  showMore: { type: Boolean, default: false, required: false },
  isLoading: { type: Boolean, default: false, required: false },
  top: { type: Number, default: 120, required: false },
  right: { type: Number, default: 24, required: false },
});
const emits = defineEmits(["close", "more"]);
const handleClose = () => {
  emits("close");
};
const handleMore = () => {
  emits("more");
};
const contentHeight = computed(() => commonStore.clientHeight - 200 + "px");
</script>

<style scoped>
.config-window {
  z-index: 99;
  /* width: 300px; */
  /* right: 24px; */
  /* top: 120px; */
  position: fixed;
  user-select: none;
  /* background-color: var(--el-color-info-light-9); */
  /* box-shadow: var(--el-box-shadow); */
  border-radius: 6px;
  border: 1px solid var(--el-border-color);
}

.config-window-dark {
  backdrop-filter: blur(20px);
  background-color: rgba(22, 22, 22, 0.65);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75);
}

.config-window-light {
  backdrop-filter: blur(15px);
  background-color: rgba(233, 233, 233, 0.6);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.config-body {
  padding: 24px;
  /* max-height: calc(100vh - 120px); */
}

.config-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  padding-right: 8px;
  color: var(--el-text-color-primary);
  border-bottom: 1px solid var(--el-border-color);
}

.config-header-title {
  margin-right: 16px;
}

.config-header-buttons {
  display: flex;
  align-items: center;
}

.config-bar {
  position: fixed;
  right: 30px;
  top: 110px;
  z-index: 9;
  display: flex;
  align-items: center;
  background-color: var(--el-bg-color-overlay);
}
</style>
